<template>
  <div class="app-container">
    <div class="footer">
      <div class="flex justify-end mb-3">
        <a-button type="primary" @click="handleAdd">新增分类</a-button>
      </div>
      <div class="table-inner">
        <a-table
          v-if="state.data && state.data.length"
          :columns="columns"
          :data-source="state.data"
          style="width: 100%"
          rowKey="cate_id"
          :loading="state.loading"
          :scroll="{ x: 900 }"
          :defaultExpandAllRows="true"
          :pagination="false"
        >
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'img'">
              <a-image :width="80" :src="record.img" />
            </template>
            <template v-if="column.dataIndex === 'status'">
              <a-switch
                v-model:checked="record.status"
                checked-children="开启"
                un-checked-children="关闭"
                :checkedValue="1"
                :unCheckedValue="0"
                @change="changeSwitch(record)"
              />
            </template>
            <template v-if="column.dataIndex === 'actions'">
              <a-space size="small">
                <a-button type="link" @click="handleEdit(record)"
                  >编辑</a-button
                >
                <a-popconfirm
                  title="你确定要删除吗?"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="handleDelete(record)"
                >
                  <a-button type="link" danger>删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
  <!--  弹出框-->
  <create-edit ref="createRef" @model-success="refresh" />
</template>

<script setup>
import { reactive, ref } from "vue";
import CreateEdit from "./components/CreateEdit.vue";
import { treeCate as list, del, open } from "@/api/goods/cate";
import { message } from "ant-design-vue";
//弹出框的ref
const createRef = ref();
const columns = [
  {
    title: "id",
    dataIndex: "cate_id",
    width: 100,
  },
  {
    title: "名称",
    dataIndex: "name",
    width: 180,
  },
  {
    title: "副标题",
    dataIndex: "content",
    width: 180,
    ellipsis: true,
  },
  {
    title: "图片",
    dataIndex: "img",
    width: 150,
  },
  {
    title: "排序",
    dataIndex: "sort",
    width: 100,
  },
  {
    title: "类型",
    dataIndex: "cate_type",
    width: 180,
    customRender(record) {
      let cateType = ["", "自营商城", "兑换商城", "都有"];
      return cateType[record.value];
    },
  },
  {
    title: "状态",
    dataIndex: "status",
    width: 150,
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 180,
  },
  {
    title: "操作",
    dataIndex: "actions",
    fixed: "right",
    width: 180,
  },
];
const state = reactive({
  data: [], //表格的数据
  loading: false,
});

//获取列表的数据
const getList = () => {
  state.loading = true;
  list().then((res) => {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      state.loading = false;
      const data = res.data;
      state.data = data.map((item) => {
        return {
          ...item,
          children: item.child.map((sonItem) => {
            return {
              ...sonItem,
            };
          }),
        };
      });
    }
  });
};
//添加
const handleAdd = () => {
  createRef.value.show();
};

//编辑
const handleEdit = (record) => {
  createRef.value.show(record);
};

//删除
const handleDelete = (record) => {
  del({ id: record.cate_id }).then(function (res) {
    if (res.code == 0) {
      message.success(res.msg);
      //重新加载数据
      getList();
    } else {
      message.error(res.msg);
    }
  });
};
const changeSwitch = (record) => {
  open({
    id: record.cate_id,
  }).then((res) => {
    if (res.code == 0) {
      getList();
    }
  });
};
const refresh = () => {
  getList();
};
//获取列表
getList();
</script>

<style lang="scss" scoped>
@import "./index";
</style>
